<template>
    <div class="person">
        <h2>姓名 {{ person.name }}</h2>
        <h2>姓名 {{ person.age }}</h2>
        <h2>姓名 {{ person.gender }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeGender">修改性别</button>

    </div>
</template>
<script lang="ts" setup name='Person'>
import { ref, reactive, toRef, toRefs } from 'vue';
// 数据
let person = reactive({ name: "SDsd", age: 22, gender: "男" })
// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
/*      
    如果取出值后我们不做处理,那么我们取出的值,可以理解为
        let name , age ,gender 并对此进行了重新赋值.而我们的输出的是person中的name,自然修改就不会生效
        

    当我们使用toRefs对各个属性进行取出后,我们进行的是浅复制,复制出的各个属性的内存地址, 跟person中的属性的对照的内存地址是一致的,故而修改会跟着一起修改
 */
 let {name,age,gender} = toRefs(person)

function changeName() {
    name.value = "DD"
}
function changeAge() {
    age .value= 11
}
function changeGender() { 
    gender.value= "女"
}

    
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
